<script setup>

defineProps(['list'])

const goDetailsPage = (id) => {
  const url = `https://www.krqia.cn/article/${id}.html`
  window.location.href = url
}

</script>

<template>
  <div class="posts-list">
    <div class="art-box" v-for="item in list" :key="item.id">
      <div class="art-box__art-item-wrap">
        <article @click="goDetailsPage(item.id)">
          <div class="article__img-box">
            <img :src="item.img" alt="">
          </div>
          <div class="article__content">
            <h2>{{item.title}}</h2>
            <p class="article__content__text">
              {{item.info}}
            </p>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.posts-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.art-box {
  flex: 0 0 50%;
  max-width: 50%;
  cursor: pointer;
  .art-box__art-item-wrap {
    padding: 10px;
    article {
      display: flex;
      padding: 10px;
      background-color: var(--color-article-bg);
      border-radius: 5px;
      transition: all 0.5s;
      .article__img-box {
        width: 200px;
        font-size: 0;
        margin-right: 20px;
        img {
          width: 100%;
          height: 120px;
          border-radius: 5px;
        }
      }
      .article__content {
        flex: 1;
        overflow: hidden;
        h2 {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 7px 0;
          font-size: var(--fontsize-medium-s);
          font-weight: bold;
          color: var(--color-primary);
        }
        .article__content__text {
          color: var(--color-text-d);
          font-size: var(--fontsize-medium);
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

@media (max-width: 980px) {
  .art-box {
    flex: 0 0 100%;
    max-width: 100%;
    .art-box__art-item-wrap {
      article {
        .article__img-box {
          width: 120px;
        }
      }
    } 
  } 
}
</style>
